<!--考场申请-->
<template>
  <div>
    <el-form :inline="true" :model="requestData" style="width: 100%;margin-bottom: -10px;margin-top: -10px;" label-width="80px">
      <el-form-item label="考场名称">
        <el-input size="mini" v-model="requestData.map.tr_name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="success" icon="el-icon-search" @click="searchInfo">查询</el-button>
        <el-button size="mini" icon="el-icon-search" @click="clearSearchInfo">重置</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteInfoListInfo">删除</el-button>
      </el-form-item>
      <div style="float: right;">
      <el-form-item>
        <el-input size="mini" v-model="testRoom.tr_name" placeholder="考场名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="mini" v-model="testRoom.tr_password" placeholder="考场代码"></el-input>
      </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="addAgreeTestRoom">申请考场</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange">
      <el-table-column
        align="center"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        align="center"
        prop="testRoom.user.user_name"
        label="监考用户名"
        minWidth="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="testRoom.user.user_nick_name"
        label="监考昵称"
        minWidth="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="testRoom.tr_name"
        label="考场"
        minWidth="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="state"
        label="状态"
        minWidth="120">
      </el-table-column>
      <el-table-column
        label="操作"
        minWidth="180"
        align="center">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete"  size="mini" @click="deleteInfo(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 40,50]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
  </div>
</template>
<script>
  import{getStudentApply,deleteApplyTestRoom,agreeApplyTestRoom} from '@/api/invigilate'
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item";
  export default{
    components: {ElFormItem},
    created(){
        this.getDataList();
    },
    data(){
      return {
        tableData:[],
        selectList:[],

        testRoom:{
           tr_name:"",
           tr_password:""
        },

        pageInfo:{
          page:1,//页数
          size:10, //页面大小
          total:0 //页总数
        },
        requestData:{
          pageSize:10,
          pageNum:1,
          map:{
            tr_name:''
          }
        }
      }
    },
    methods:{
      getDataList(){
        getStudentApply(this.requestData).then(res=>{
            if(res.code == 200){
                let tableInfo = res.data.data;
                if(tableInfo.length > 0){
                    for(let obj of tableInfo){
                        obj.state = "未同意";
                    }
                    this.tableData = tableInfo;
                }
            }
        })
      },

      addAgreeTestRoom(){
        if(this.testRoom.tr_name != '' && this.testRoom.tr_password != ''){
          agreeApplyTestRoom(this.testRoom).then(res=>{
              if(res.code == 500){
                this.$message({
                  message: '申请的考场不存在',
                  type: 'warning'
                });
              }else{
                this.$message({
                  message: '申请成功，等待监考同意',
                  type: 'success'
                });
                this.getDataList();
              }
          })
        }else{
          this.$message({
            message: '考场名或考场代码不能为空',
            type: 'warning'
          });
        }
      },

      searchInfo(){
        this.getDataList();
      },

      clearSearchInfo(){
        this.requestData.map.tr_name = "";
        this.getDataList();
      },

      deleteInfo(row,index){
         let list = [{ru_id:row.ru_id}];
         this.deleteInfoList(list);
      },

      deleteInfoListInfo(){
          let list = [];
          if(this.selectList != null && this.selectList.length > 0){
              for(let obj of this.selectList){
                  list.push({ru_id:obj.ru_id})
              }
          }
          this.deleteInfoList(list);
      },

      deleteInfoList(list){
        if(list == null || list.length <= 0){
          this.$message({
            type: 'warning',
            message: '请至少选择一行要删除的数据'
          });
        }else{
          this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteAllowUser(list).then(res=>{
              if(res.code == 200){
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
                this.selectList = [];
                this.getDataList();
              }
            })
          }).catch(() => {

          });
        }
      },

      //复选框选择的数据
      handleSelectionChange(val){
        this.selectList = val;
      },
      //每页的条数发生改变时调用
      handleSizeChange(size){
        this.requestData.pageSize = size;
        this.pageInfo.size = size;
        this.getDataList();
      },

      //页数发生改变时调用
      handleCurrentChange(page){
        this.requestData.pageNum = page;
        this.pageInfo.page = page;
        this.getDataList();
      },
    }
  }
</script>
